【iOS】iPhoneの一等地にロック画面ウィジェットを設置しよう!

【iOS】iPhoneの一等地にロック画面ウィジェットを設置しよう!

Clock Icon2023.03.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

作ったアプリをユーザーの皆様に出来るだけ多く触っていただけると嬉しい限りですが、その為にも触れ易い位置にアプリを設置することが大事だと思います。

iOS 16からロック画面をカスタマイズできるようになっており、ロック画面にもウィジェットを設置することが可能です。ロック画面こそがiPhoneを手に取った時のユーザーに一番近いエントリーポイントになるので出来るなら対応しておきたいところですね。

新機能!?となると、実装に少し腰が重くなる気持ちもありますが、とても簡単に実装できるので実装方法について紹介していきます。

はじめに

ウィジェットのFamilyには様々なものがありますが、今回はロック画面ウィジェットだけに使うものを抜粋して紹介いたします。今回はロック画面にウィジェットを設置することに特化した記事になる為、TimelineProviderのメソッドやウィジェットの更新の流れについての説明等は行っておりません。

環境

  • Xcode 14.2
  • iOS 16.2

Widget Extensionを追加

メニューバーの File > New > Target を選択し、表示されたポップアップ上でWidget Extensionを選択します

名前は任意の名前を設定します。今回はLockScreenWidgetという名前にしました。

その後、アクティベートするか問われるのでアクティベートします。

ロック画面用のWidget Familyを追加

ロック画面用のWidget Family

今回はロック画面に対応するWidgetFamilyのみを追加する為、そのファミリーのみの値を作成しました。各ファミリーがどういった見え方をするかは後述します。

extension WidgetFamily {

    static let lockScreenFamilies: [WidgetFamily] = [
        .accessoryInline,
        .accessoryCircular,
        .accessoryRectangular
    ]
}

WidgetにsupportedFamiliesを追加

Widget Extensionを作成した時に自動で生成されるWidget構造体のbody.supportedFamiliesを追加します。値は上記で作成したロック画面用のファミリーを設定しています。

struct LockScreenWidget: Widget {
    let kind: String = "LockScreenWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            LockScreenWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
        // 追加
        .supportedFamilies(WidgetFamily.lockScreenFamilies)
    }
}

ロック画面用ウィジェットのViewを設定

Widget Extensionを作成した時に自動で生成されるEntryView構造体のbody内にロック画面用のウィジェットのViewを設定します。

@Environment(\.widgetFamily)で現在のWidgetFamilyの状態が取得できる為、その値によってViewの見た目を変更しています。

struct LockScreenWidgetEntryView : View {

    @Environment(\.widgetFamily) var family

    var entry: Provider.Entry

    var body: some View {
        switch family {
        case .accessoryInline:
            Text("インライン")
        case .accessoryCircular:
            CircularView()
        case .accessoryRectangular:
            RectangularView()
        default:
            Text(entry.date, style: .time)
        }
    }
}

struct CircularView: View {

    var body: some View {
        Image(systemName: "face.smiling")
            .resizable()
    }
}

struct RectangularView: View {

    var body: some View {
        Rectangle()
            .fill(.red)
            .overlay {
                Text("長方形")
            }
    }
}

たったこれだけでロック画面ウィジェットの実装は完了です。どのように表示されるか見てみましょう。

ロック画面にウィジェットを表示する

WidgetFamilyとViewの対応表は下記になります。

  • accessoryInline
    • インラインと表示
  • accessoryCircular
    • スマイルイメージ
  • accessoryRectangular
    • 長方形と表示
Inlineと2つのRectangular  Inlineと4つのCircular InlineとRectangularと2つのCircular
  • accessoryInlineは、1つのロック画面に対して1つしか設置出来ない
  • accessoryCircularは1~最大4つまで設置出来る
  • accessoryRectangularは1~最大2つまで設置出来る

まとめ

ロック画面ウィジェットは、

  • iOS 16から使用できる
  • iPhone上でユーザーに一番近いアプリのエントリーポイント
  • 実装は比較的容易(複雑な仕様になってくる場合は除く)
  • 設置できるウィジェットの数は限られている

おわりに

ロック画面ウィジェットはiOS 16から使用できるという制約もあり、まだ多くのアプリが対応されていない気がします。ロック画面に設置できるウィジェットの数は限られている為、今のうちにiPhoneの一等地を獲得出来るように進めていきたいと思います。

参考

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.